<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg id="svg" style="width: 800px; height: 600px">
    <image id="img" onclick="test()" xlink:href="https://s0.lgstatic.com/common/image/pc/default_boy_headpic1.png" x="100" y="100" width="100" height="100">
      <!-- <set attributeName="width" to="200" begin="click" /> -->
    </image>
    <rect stroke="red" stroke-width="1" width="100" height="100" fill="white"></rect>
  </svg>
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  const data = []
  function test() {
    let x = document.getElementById('img').getAttribute('x')
    let y = document.getElementById('img').getAttribute('y')
    let width = document.getElementById('img').getAttribute('width')
    let height = document.getElementById('img').getAttribute('height')
    console.log(123, x,y)
    console.log(svg)
    
    const rect = d3.select('svg').append('rect')
      .attr('width', width)
      .attr('height', height)
      .attr('x', x)
      .attr('y', y)
      .attr('stroke', 'blue')
      .attr('fill', 'none')

    d3.select('svg').append('circle').attr('r', 3)
    .attr('cx', (+x + +width/2))
    .attr('cy', y)
    .attr('stroke', 'yellow')
    .attr('fill', 'white')

    const path = d3.path()
    console.log(path)
    path.moveTo(20,20)
    path.lineTo(200,200)
    path.closePath()

    d3.select('svg').append('path')
      .attr('d', path)
      .attr('stroke', 'green')
      // .attr('fill', 'white')

  }
</script>
</html>